<template>
  <div
    id="cesiumContainer"
    ref="cesiumContainer"
  ></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
import { onMounted } from 'vue';

// 设置cesium token
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MmE4NGIxYi0xODY1LTQ5ZDEtODRkZi1jMDE4NDA0YTM3MWQiLCJpZCI6MjI2NDA2LCJpYXQiOjE3MjAwODg4NzZ9.EBKimXGOflvb9c_IBerc9T3knO7XZvUt-RffbhKELVE';
// 设置cesium静态资源路径
window.CESIUM_BASE_URL = '/';
// 设置相机默认视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5,
  20.4,
  110.4,
  61.2
);

onMounted(() => {
  // 创建一个 3D 地球或地图查看器
  var viewer = new Cesium.Viewer('cesiumContainer', {});

  // 隐藏cesium logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // 折线
  // // 1、虚线材质
  // let material = new Cesium.PolylineDashMaterialProperty({
  //   dashLength: 30,
  //   color: Cesium.Color.GREEN,
  // });

  // 2、箭头线
  // let material = new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED);

  // 3、发光线段
  let material = new Cesium.PolylineGlowMaterialProperty({
    glowPower: 0.8, // 发光程度
    taperPower: 0.7, // 发光结尾位置
    color: Cesium.Color.GREEN,
  });
  const line = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
      width: 20,
      material: material,
    },
  });
});
</script>

<style></style>
